import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 这里导入的为英文模板
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
// 这里导入的是中文模板
// import locale from 'element-ui/lib/locale/lang/zh-CN'
import '@/styles/index.scss' // global css

// 引入国家化i18n
import i18n from './lang'
import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 导入本地图片，因为脚手架路劲html无法直接访问
import img from '@/assets/common/img.jpeg'
Vue.directive('fiximg', {
  // 会在当前指令作用的dom元素 插入之后执行
  // options 里面是指令的表达式
  inserted: function(dom) {
    dom.addEventListener('error', () => {
      // 设置图片
      dom.src = img
    })
    // 额外处理空的状态,如果有就用原始的图片，没有就用本地的图片
    dom.src = dom.src || img
  }
})

// // 导入单个过滤器 在员工管理模块中处理入职和离职等日期的处理
// import { formatDate } from '@/filters'
// // 注册过滤器
// Vue.filter('formatDate', formatDate)

// 导入过滤器模块中的全部过滤函数，思想是全部导入，在对导入的对象进行遍历，每遍历一个注册一个
import * as myFilters from '@/filters'
// 使用for in对象遍历方法
for (const key in myFilters) {
  // 每遍历一个过滤函数注册一次
  Vue.filter(key, myFilters[key])
}

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
// 设置element为当前的语言
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

import myCom from '@/components/myComs'
// Vue.use 是 vuejs 中的插件机制
// 如果你想要创建一个插件, 只需要导出一个函数即可
// 这个函数会在 Vue.use 执行的时候自动调用
// 还有另外一种写法, 是导出一个对象也行, 但是这种写法必须带有 install 函数
// 是这个 install 函数被执行
Vue.use(myCom)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
